<template>
  <el-form label-width="120px" :model="form" ref="form" :rules="rulesForm">
    <el-form-item :label="$t('订单编号')">
      <div style="line-height: 32px">
        {{ rows.loanRecordId }}
      </div>
    </el-form-item>
    <el-form-item :label="$t('豁免金额')">
      <div style="line-height: 32px">
        {{ rows.notRefundAmount }}
      </div>
    </el-form-item>
    <el-form-item :label="$t('上传凭证')" v-if="$permiss[524]">
      <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          ref="upload"
          action="#"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG"
          :http-request="uploadChange">
        <img v-if="form.certificate" :src="form.certificate" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item :label="$t('应还时间')">
      <div style="line-height: 32px">
        {{ rows.refundDate }}
      </div>
    </el-form-item>
    <!--    <el-form-item :label="$t('实际还款时间')" prop="refundTime">-->
    <!--      <el-date-picker-->
    <!--          v-model="form.refundTime"-->
    <!--          type="datetime"-->
    <!--          value-format="yyyy-MM-dd HH:mm:ss"-->
    <!--          :picker-options="pickerOptions"-->
    <!--          :placeholder="$t('选择日期时间')">-->
    <!--      </el-date-picker>-->
    <!--    </el-form-item>-->
    <el-form-item :label="$t('备注')" prop="remarks">
      <el-input type="textarea" :rows="4" v-model="form.remarks"/>
    </el-form-item>
  </el-form>
</template>

<script>
import qs from "qs";
import {addOverdueWaiver, uploadCertificate} from '@/api/finance'

export default {
  props: ['rows'],
  data() {
    return {
      form: {},
      rulesForm: {
        refundTime: [
          {required: true, message: this.$t('请选择还款时间'),},
        ],
      },
    }
  },
  methods: {
    async uploadChange(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      formData.append('loanRecordId', this.rows.loanRecordId)
      const res = await uploadCertificate(formData)
      if (res.code === 1) {
        this.$set(this.form, 'certificate', res.data)
      }
    },
    submitForm() {
      if (!this.$permiss[524]) return this.$message.error(this.$t('无权限'))
      return new Promise((resolve) => {
        this.$refs.form.validate(async v => {
          if (v) {
            this.$confirm(this.$t("为避免造成损失，请确认是否进行该操作") + '?', this.$t("提示"), {
              type: "warning",
            }).then(async () => {
              this.$emit('loading', true)
              const {refundTime} = this.rows
              const res = await addOverdueWaiver(
                  {
                    ...this.form,
                    loanRecordId: this.rows.loanRecordId,
                    refundTime: refundTime
                  }
              )
              if (res.code === 1) {
                resolve(res.code)
                this.$emit('loading', false)
                this.$refs.upload.clearFiles()
                this.$message.success(this.$t('操作成功'))
              } else {
                this.$emit('loading', false)
              }
            }).catch(() => {
            });
          }
        })
      })

    },
    clearForm() {
      this.form = {}
      this.$refs.upload.clearFiles()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
